﻿<!doctype html> 
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>英文、中英文地图</title>
  <script src="http://webapi.amap.com/maps?v=1.4.1&key=135fd4f0acd9cd6ae076dc183594cd0c"></script>
  <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0" />
  <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
  
  <script type="text/javascript" src="../js/localstorage.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/zTreeStyle.css">
		<script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
		
</head>

<body>
	<script type="text/javascript">
    	// tree节点点击事件  name为这个节点的值
		function zTreeOnClick(event, treeId, treeNode) {
		    $("#site").val(treeNode.name);
		};
		var setting = {
			callback: {
				onClick: zTreeOnClick
			}
		};
		var zNodes =[
			{ name:"香港", open:true,
				children: [
					{ name:"九龙区",open:true,
						children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"旺角区",open:true,
					        children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"西贡区",open:true,
                            children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"油尖旺区",open:true,
                           children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"深水埗区",open:true,
				           children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						   ]}
				]}
		];
    $(function(){
    	// $("#details").css("width",$("html").width()-250+"px")
    	// $(".listFilter").css("width",$("html").width()-200+"px")
    	// $(".reportResults").css("width",$("html").width()-200+"px")
    	// $("#tree").css("min-height",$("html").height()-150+"px")
    	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
    function add(){
    	$(".k-overlay,.content").css("display","flex");
    }
    function save(){
    	zNodes[0].children[0].children.push({ name:"场所"+Math.floor(Math.random()*100),open:true});
    	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    	$(".k-overlay,.content").css("display","flex");
    }
    </script>
    <script type="text/javascript">
    	$(function(){
    	
    		$("#qhbtn").click(function(){
    			alert(1)
    		})

			$("#site").click(function(e){
				$("#tree").slideDown(300);
    		})

    		// $("#site").blur(function(e){
    		// 	$("#tree").slideUp(300);
    		// })
    		$("#tree").hover(function(){},function(){
    			$("#tree").slideUp(300);
    			// $("#site").blur();
    		})
    	})
    </script>
		<div  style="z-index: 3;position: absolute;top: 5%;right: 1%; width: 200px;text-align: center;">
			<button id="site" style="background: #03a9f4;color: #fff;">
				<script>document.write(language.choiceSite)</script>
			</button>
			<div id="tree" style="display: none;background: #fff;opacity: 0.9;">								<!-- <button style="float: right;" onclick="add()">增加</button> -->
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
	
	
	
  <div id="mapContainer"></div>
  <!--<div class="button-group">
    <input id="en" type="button" class="button" value="显示英文底图" />
    <input id="zh_en" type="button" class="button" value="显示中英文对照底图" />
    <input id="zh_cn" type="button" class="button" value="显示中文底图" />
  </div>-->
  <script>

    $(function(){
    	var map = new AMap.Map('mapContainer', {
      center: [114.1720064282,22.2810079531]
    });
    var en = "en";
    map.setLang(en);
    ['en', 'zh_en', 'zh_cn'].forEach(function(btn) {
      var button = document.getElementById(btn);
      AMap.event.addDomListener(button,'click',clickListener)
    });

    function clickListener() {
        map.setLang(this.id);
    }
    })
  </script>
</body>

</html>